<!-- 我的地图 -->

<template>
  <div class="MyMap">
    <div ref="map" class="MyMap-render" />

    <div class="MyMap-floor">
      <div
        v-for="item in floors"
        :key="item.id"
        :class="{ 'floor-current': current === item.id }"
        @click="changeFloor(item.id)"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import CONST from '@/views/Home/MyMap/CONST'

const ENGINE = CORE.common('js/Engine3.1.js')

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MyMap',

  /**
   * 状态数据 (函数返回对象)
   */
  data() {
    return {
      engine: null, // 地图引擎
      current: CONST.FLOOR[0].id, // 当前楼层
      popId: '', // 气泡 ID
    }
  },

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 楼层列表
     */
    floors() {
      return CONST.FLOOR_OUTER
    },
  },

  /**
   * 挂载完成 (先抽取再调用)
   */
  mounted() {
    this.initEngine()
  },

  /**
   * 销毁之前 (先抽取再调用)
   */
  beforeDestroy() {
    this.engine.dispose()
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 初始化引擎
     */
    async initEngine() {
      await CORE.loadJS(ENGINE, '地图引擎')

      const engine = new window.Engine({ ...CONST.ENGINE, dom: this.$refs.map })
      this.engine = engine

      engine.open()
    },

    /**
     * 飞往目标
     */
    flyTo(point, target, time = 0) {
      const { Type, Camera } = this.engine.Api
      Camera.flyTo({
        point: new Type.Vector3(...point),
        target: new Type.Vector3(...target),
        time,
      })
    },

    /**
     * 切换楼层
     */
    changeFloor(id) {
      const floor = this.floors.find((item) => item.id === id)
      this.current = floor.id

      const { MeshInfo } = this.engine.Api
      MeshInfo.setVisible({ objType: CONST.DEFAULT, id: floor.hide, visible: false })
      MeshInfo.setVisible({ objType: CONST.DEFAULT, id: floor.show, visible: true })

      this.flyTo(floor.point, floor.target, 1)
    },
  },
}
</script>

<style lang="scss">
@import './index.scss';
</style>
